<template>
  <div class="myPage">
    <div class="select">
      显示
      <el-select class="select-input" size="mini" v-model="limit" @change="changeLimit">
        <el-option label="5" value="5"></el-option>
        <el-option label="10" value="10"></el-option>
        <el-option label="15" value="15"></el-option>
        <el-option label="20" value="20"></el-option>
      </el-select>行
    </div>
    <el-pagination
      class="pageList"
      :current-page="curPage"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleClick"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "PageComponents",
  props: ["total", "curPage"],
  data() {
    return {
      limit: 10
    };
  },
  created() {},
  methods: {
    changeLimit() {
      this.$emit("changeLimit", this.limit);
    },
    handleClick() {
      this.$emit("changePage", this.curPage);
    }
  }
};
</script>

<style lang="scss">
.myPage {
  height: 30px;
  margin-top: 20px;
  padding-bottom: 20px;
  .select {
    float: left;
    margin-left: 4px;
    .el-select > .el-input {
      width: 40px;
      height: 30px;
      margin: 0 4px;
    }
    .el-select .el-input__inner {
      text-align: center;
      padding: 0;
      border-radius: 4px;
      height: 30px;
    }
    .el-select .el-input .el-select__caret {
      display: none;
    }
  }
  .pageList {
    float: right;
  }
}
</style>